<template>
  <div>
    <div class="banner-navbar">
      <van-nav-bar :title="title">
        <template #left>
          <van-icon name="arrow-left" size="20" color="#323233" @click="back" />
        </template>
      </van-nav-bar>
    </div>
    <div class="go"><a href="#">回到顶部</a></div>
    <div class="content" v-html="content"></div>
    <div class="comment">
      <ul class="comment-list">
        <li v-for="(item, i) in commentData" :key="i">
          <div class="left">
            <img :src="item.userInfo.avatar" alt="" />
          </div>
          <div class="right">
            <div class="top">
              <span>{{ item.userInfo.username }}</span>
              <van-icon name="ellipsis"></van-icon>
            </div>
            <div class="center">
              <p>{{ item.content }}</p>
            </div>
            <div class="bottom">
              <div class="bottom-left">
                <span>{{
                  new Date(item.addtime * 1000).toLocaleString()
                }}</span>
                <span>{{ item.ip_location }}</span>
              </div>
              <div class="bottom-right">
                <van-icon name="comment-o" size="16"></van-icon>
                <van-icon name="good-job-o" size="16">{{
                  item.count_approve
                }}</van-icon>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
   
  </div>
</template>
<script>
import axios from "axios";
import VueAxios from "vue-axios";
export default {
  data() {
    return {
      content: "",
      title: "",
      commentData: [],
    };
  },
  methods: {
    async getBanner(id) {
      await axios({
        method: "get",
        url: "https://apis.netstart.cn/xpc/e_article/" + id,
      }).then((res) => {
        this.content = res.data.content;
        this.title = res.data.title;
      });
      this.getComment(id);
    },
    getComment(id) {
      axios({
        method: "get",
        url: "https://apis.netstart.cn/xpc/e_comments/" + id,
        params: {
          page: 1,
        },
      }).then((res) => {
        this.commentData = res.data.data.list;
      });
    },
    back() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.getBanner(this.$route.query.id);
  },
};
</script>
<style lang="scss">
.go{
    position:fixed;
    top: 300px;
    right: 10px;
    margin-top: 20px;
    width: 60px;
    float: right;
    height: 60px;
    color: rgb(255, 88, 5);
    text-align: center;
    background-color: #ccc;
    opacity: 0.5;
}
.content {
  padding: 15px 20px;
  overflow: hidden;
}

.banner-navbar {
  margin-bottom: 10px;
  .van-nav-bar {
    height: 12.2657vw;
    border-bottom: 1px solid #ccc;
  }
  .van-nav-bar__content {
    height: 10.7vw;

    .van-nav-bar__title {
      font-size: 25px;
      line-height: 10.7vw;
    }
  }
}
.comment {
  padding-bottom: 60px;
  .comment-list {
    li {
      display: flex;
      padding: 20px;
      margin-bottom: 20px;
      .left {
        padding: 0 20px;
        img {
          width: 8.4541vw;
          height: 8.4541vw;
          border-radius: 50%;
        }
      }
      .right {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        .top {
          color: #999999;
          margin-bottom: 20px;
          display: flex;
          justify-content: space-between;
          font-size: 3.3816vw;
        }
        .center {
          font-size: 3.8478vw;
        }
        .bottom {
          display: flex;
          align-items: center;
          margin-top: 20px;
          justify-content: space-between;
          margin-bottom: 20px;
          .van-icon {
            margin-right: 25px;
          }
          span {
            font-size: 2.8986vw;
            color: #999999;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>